<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>昆仑保险经纪核心业务系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link th:href="@{/static/layui/css/layui.css}" rel="stylesheet" media="all"/>

<style type="text/css">
.layadmin-iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

</style>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo" th:text="${session.userBean.sysName}"></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          <span th:text="${session.userBean.loginUser.name}"></span>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
 <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
    <ul class="layui-tab-title"></ul>
    <div class="layui-tab-content"></div>
 </div>
 
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    ©系统管理员
  </div>
</div>
<script th:src="@{/static/layui/layui.all.js}"></script>   
<script>
//JavaScript代码区域
var $ = jQuery = layui.jquery;
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var layer = layui.layer;

        element.tabAdd('demo', {
        	  title: '选项卡的标题'
        	  ,content: '选项卡的内容' //支持传入html
        	  ,id: '选项卡标题的lay-id属性值'
        	});    
        
 var active = {
            tabAdd: function (url, id) {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                  , content: '<iframe data-frameid="'+id+'" frameborder="0" name="content" scrolling="no" width="100%" src="' + url + '"></iframe>'
                  , id: id //实际使用一般是规定好的id，这里以时间戳模拟下
                })
                CustomRightClick(id);//绑定右键菜单
                FrameWH();//计算框架高度
            }
          , tabChange: function (id) {
              //切换到指定Tab项
              element.tabChange('demo', id); //切换到：用户管理
              $("iframe[data-frameid='"+id+"']").attr("src",$("iframe[data-frameid='"+id+"']").attr("src"))//切换后刷新框架
          }
            , tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            }
            , tabDeleteAll: function (ids) {//删除所有
                $.each(ids, function (i,item) {
                    element.tabDelete("demo", item);
                })
            }
        };
 
//结合菜单展示内容
 $(".layui-side-scroll a").click(function () {
     var dataid = $(this);
     if ($(".layui-tab-title li[lay-id]").length <= 0) {
         active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"));
     } else {
         var isData = false;
         $.each($(".layui-tab-title li[lay-id]"), function () {
             if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                 isData = true;
             }
         })
         if (isData == false) {
             active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"));
         }
     }
     active.tabChange(dataid.attr("data-id"));
 })
 //绑定右键菜单
        function CustomRightClick(id) {
            //取消右键  
            $('.layui-tab-title li').on('contextmenu', function () { return false; })
            $('.layui-tab-title,.layui-tab-title li').click(function () {
                $('.rightmenu').hide();
            });
            //桌面点击右击  
            $('.layui-tab-title li').on('contextmenu', function (e) {
                var popupmenu = $(".rightmenu");
                popupmenu.find("li").attr("data-id",id);
                l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
                popupmenu.css({ left: l, top: t }).show();
                //alert("右键菜单")
                return false;
            });
        }
 $(".rightmenu li").click(function () {
     if ($(this).attr("data-type") == "closethis") {
         active.tabDelete($(this).attr("data-id"))
     } else if ($(this).attr("data-type") == "closeall") {
         var tabtitle = $(".layui-tab-title li");
         var ids = new Array();
         $.each(tabtitle, function (i) {
             ids[i] = $(this).attr("lay-id");
         })

         active.tabDeleteAll(ids);
     }

     $('.rightmenu').hide();
 })

 function FrameWH() {
             var h = $(window).height() -41- 10 - 60 -10-44 -10;
             $("iframe").css("height",h+"px");
         }

         $(window).resize(function () {
             FrameWH();
         })

 　　
</script>
<ul class="rightmenu">
            <li data-type="closethis">关闭当前</li>
            <li data-type="closeall">关闭所有</li>
        </ul>
</body>
</html>
